<script setup>
import * as echarts from 'echarts';
import 'echarts-gl'
import axios from 'axios';
import {mainStore} from '@/store/index';
import {onMounted, reactive,} from 'vue';

let statusChart;
const store = mainStore();
let loopData = reactive([
  {
    "value": 0,
    "name": "待整改"
  },
  {
    "value": 0,
    "name": "整改中"
  },
  {
    "value": 0,
    "name": "已整改"
  },

]);
let color = reactive(["#e64a19", "#cddc16", "#20b5ff"]);
let optionData = reactive([]);
let option = reactive({});
const link = async function () {

  const UserInfo = JSON.parse(sessionStorage.getItem("UserInfo")).AccessToken;
  const user = JSON.parse(UserInfo)
  console.log(user)
  window.open(
      `http://hse.yunuat.cqyt.petrochina/#/login?jwt=yltrqclc_${user.Account}_${user.AccessToken}`
  );
};

function getToken() {
  return new Promise((resolve, reject) => {
    axios({
      url: "http://10.78.1.12:10008/api/constructor/authcenter-api/jwt-token",
      method: "post",
      data: {
        userName: "ba62a4b730f65Anff4kfn2pfad14d462",
        passWord: "68a39b4790503ef481d8e0a66e065fc3",
      },
    }).then((res) => {
      resolve(res.data.data.objData.accessToken);
    });
  });
}

const formatterData = () => {
  optionData = [];
  loopData.forEach((item, index) => {
    optionData.push({
      name: item.name,
      value: item.value,
      itemStyle: {
        color: color[index],
      },
    })
  })
  initEchart()
}
const initEchart = () => {
  //获取对应的dom元素
  const el = document.querySelector('.charts')
  // 初始化
  statusChart = echarts.init(el)
  // 设置option
  option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    color: color,
    // legend: {
    //     orient: "vertical",
    //     x: "right",
    //     data: ["待整改", "整改中", "已整改"],
    //     formatter: function (name) {
    //         var oa = option.series[0].data;
    //         var num = oa[0].value + oa[1].value + oa[2].value ;
    //         for (var i = 0; i < option.series[0].data.length; i++) {
    //             if (name == oa[i].name) {
    //                 return (
    //                     name +
    //                     "     " +
    //                     oa[i].value +
    //                     "     " +
    //                     ((oa[i].value / num) * 100).toFixed(2) +
    //                     "%"
    //                 );
    //             }
    //         }
    //     },
    // },
    series: [
      {
        name: "",
        type: "pie",
        radius: "70%",
        center: ["50%", "50%"],
        data: loopData,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.1)",
          },
        },
        itemStyle: {
          normal: {
            label: {
              color: '#fff',
              show: true,
              //	                            position:'inside',
              formatter: "{b}: {c} ({d}%)",
            },
          },
          labelLine: {
            normal: {
              // 统一设置指示线长度
              length: 1,
              length2: 2,
            }
          },
        },
      },
    ],
  };

  statusChart.setOption(option)
}
const getData = () => {
  axios.post('http://10.78.164.124:8002/api/Constructor/hse_homepageapi/queryyltrqclcquestiontomonth').then((response) => {
    if (response.data.data) {
      loopData[0].value = response.data.data.notRectified_count;
      loopData[1].value = response.data.data.underRectification_count;
      loopData[2].value = response.data.data.rectified_count;
      formatterData();
      window.addEventListener("resize", () => {
        statusChart.dispose();
        initEchart();
      });
    }
  })
}
onMounted(() => {
  getData();
  setInterval(() => {
    getData();
  }, 1000 * 60 * 2);
})
</script>
<template>
  <div class="ProblemReporting">
    <div class="header">
      <div class="title" @click="link"></div>
    </div>
    <div class="Frame">
      <div class="charts"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ProblemReporting {
  width: 100%;
  height: 100%;
  overflow: hidden;


  .header {
    height: .2031rem;
    width: 100%;
    display: flex;

    .title {
      height: .2000rem;
      width: 40%;
      display: inline-block;
      background-image: url('@/assets/title/ProblemReportingTitle.png');
      background-repeat: no-repeat;
      background-size: 0.53rem .1406rem;
      background-position: .0521rem 50%;
    }
  }


  .Frame {
    height: calc(100% - .2000rem);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .charts {
      width: 100%;
      height: 100%;
    }
  }
}
</style>